<template>
  <div>
    <h2>{{ $t('dashboardTestWork.bymnrjwcsgnzbtgwdxbz') }}</h2>
    <a-divider />
    <div class="multi-tab-test">
      <h4>{{ $t('dashboardTestWork.dbqzjcsgn') }}</h4>
      <a-button @click="handleCloseCurrentTab" style="margin-right: 16px;">{{ $t('dashboardTestWork.gbdqy') }}</a-button>
      <a-button @click="handleOpenTab" style="margin-right: 16px;">{{ $t('dashboardTestWork.dk') }} {{ $t('dashboardTestWork.rwlb') }}</a-button>
      <a-popconfirm :visible="visible" @confirm="confirm" @cancel="cancel" okText="{{ $t('dashboardTestWork.qd') }}" cancelText="{{ $t('dashboardTestWork.qx') }}">
        <template v-slot:title>
          <div>
            <a-form :form="form" layout="inline">
              <a-form-item label="$t('dashboardTestWork.zdymc')">
                <a-input v-decorator="['tabName', {rules: [{required: true, message: '{{ $t('dashboardTestWork.qsrxd') }} Tab {{ $t('dashboardTestWork.mc') }}'}]}]"/>
              </a-form-item>
            </a-form>
          </div>
        </template>
        <a-button @click="() => visible = !visible" style="margin-right: 16px;">{{ $t('dashboardTestWork.xgdq') }} Tab {{ $t('dashboardTestWork.mc') }}</a-button>
      </a-popconfirm>

      <a-popconfirm :visible="visible2" @confirm="confirm2" @cancel="() => visible2 = false" okText="{{ $t('dashboardTestWork.qd') }}" cancelText="{{ $t('dashboardTestWork.qx') }}">
        <template v-slot:title>
          <div>
            <p>{{ $t('dashboardTestWork.ym') }} KEY 是由{{ $t('dashboardTestWork.ym') }}的路由 <code>path</code> {{ $t('dashboardTestWork.jdd') }}</p>
            <p>{{ $t('dashboardTestWork.rgyxgmygymbtgymbxyjbdkz') }} Tab {{ $t('dashboardTestWork.l') }}</p>
            <p>{{ $t('dashboardTestWork.hqkyklyhdbcs') }} Tab {{ $t('dashboardTestWork.ljkymyzzxz') }}</p>
            <a-form :form="form2" layout="inline">
              <a-form-item label="$t('dashboardTestWork.ym')KEY">
                <a-input v-decorator="['tabKey', { initialValue: '/dashboard/workplace' }]" />
              </a-form-item>
              <a-form-item label="$t('dashboardTestWork.zdymc')">
                <a-input v-decorator="['tabName', {rules: [{required: true, message: '{{ $t('dashboardTestWork.qsrxd') }} Tab {{ $t('dashboardTestWork.mc') }}'}]}]"/>
              </a-form-item>
            </a-form>
          </div>
        </template>
        <a-button @click="() => visible2 = !visible2">{{ $t('dashboardTestWork.xgmyg') }} Tab {{ $t('dashboardTestWork.mc') }}</a-button>
      </a-popconfirm>
    </div>
    <a-divider />
    <div class="page-loading-test">
      <h4>{{ $t('dashboardTestWork.qjzzcs') }}</h4>
      <a-button @click="handleOpenLoading" style="margin-right: 16px;">{{ $t('dashboardTestWork.dkzz') }}(5s {{ $t('dashboardTestWork.zdgb') }})</a-button>
      <a-button @click="handleOpenLoadingCustomTip">{{ $t('dashboardTestWork.dkzz') }}({{ $t('dashboardTestWork.zdytsy') }})</a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TestWork',
  data () {
    return {
      visible: false,
      visible2: false
    }
  },
  created () {
    this.form = this.$form.createForm(this)
    this.form2 = this.$form.createForm(this)
  },
  methods: {
    handleCloseCurrentTab () {
      this.$multiTab.closeCurrentPage() // or this.$multiTab.close()
    },
    handleOpenTab () {
      this.$multiTab.open('/features/task')
    },

    handleOpenLoading () {
      this.$nextTick(function () {
        console.log('this', this)
        console.log('this.$refs.tInput', this.$refs.tInput)
      })
      this.$loading.show()
      setTimeout(() => {
        this.$loading.hide()
      }, 5000)
    },
    handleOpenLoadingCustomTip () {
      this.$loading.show({ tip: this.$t('dashboardTestWork.zdytsy') })
      setTimeout(() => {
        this.$loading.hide()
      }, 5000)
    },

    // confirm
    confirm (e) {
      e.stopPropagation()
      const { path } = this.$route
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$multiTab.rename(path, values.tabName)
          this.visible = false
        }
      })
    },
    cancel () {
      this.visible = false
    },
    confirm2 (e) {
      e.stopPropagation()
      this.form2.validateFields((err, values) => {
        if (!err) {
          this.$multiTab.rename(values.tabKey, values.tabName)
          this.visible2 = false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
